<template>
  <div class="swiper-simple" :style="{ width: width, height: height }">
    <div class="carousel-container" :style="{ height: height }">
      <div
          v-for="(slide, index) in slides"
          :key="index"
          class="slide"
          :class="{ active: currentIndex === index }"
      >
        <img
            :src="slide.url"
            alt="幻灯片图片"
            @load="onImageLoad(index)"
            @error="onImageError(index)"
        />
        <div v-if="slide.loading" class="loading">加载中...</div>
        <div v-if="slide.error" class="error">加载失败</div>
      </div>
    </div>
    <button v-if="slides.length > 1" class="prev" @click="prevSlide">&#10094;</button>
    <button v-if="slides.length > 1" class="next" @click="nextSlide">&#10095;</button>
  </div>
</template>

<script setup>
import { ref, onMounted, defineProps } from 'vue';

const props = defineProps({
  width: {
    type: String,
    default: '100vw'
  },
  height: {
    type: String,
    default: '100vh'
  },
  slidesData: {
    type: Array,
    required: true,
  }
});

const slides = ref(props.slidesData);
const currentIndex = ref(0);

// 切换到下一张幻灯片
const nextSlide = () => {
  if (slides.value.length > 1) {
    currentIndex.value = (currentIndex.value + 1) % slides.value.length;
  }
};

// 切换到上一张幻灯片
const prevSlide = () => {
  if (slides.value.length > 1) {
    currentIndex.value = (currentIndex.value - 1 + slides.value.length) % slides.value.length;
  }
};

// 图片加载完成时的回调
const onImageLoad = (index) => {
  slides.value[index].loading = false;
};

// 图片加载失败时的回调
const onImageError = (index) => {
  slides.value[index].loading = false;
  slides.value[index].error = true;
};

// 组件挂载时初始化
onMounted(() => {
  // 不需要额外的预加载逻辑，图片会在模板中自动加载
});
</script>

<style scoped>
.swiper-simple {
  position: relative;
  overflow: hidden;
}

.carousel-container {
  position: relative;
  height: 100%;
}

.slide {
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
}

.slide.active {
  opacity: 1;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: drop-shadow(0px 4px 6px rgba(0,0,0,0.5));
}

.loading, .error {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px 20px;
  border-radius: 5px;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.05); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

.error {
  background-color: rgba(255, 0, 0, 0.5);
}

.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  font-size: 24px;
  z-index: 10;
  transition: background-color 0.3s ease;
}

.prev:hover, .next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}
</style>